const circles = document.querySelectorAll(".circle");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const line = document.getElementById("line");

let activeIndex = 1;

prev.addEventListener("click", () => {
    activeIndex--;
    updated();
});
next.addEventListener("click", () => {
    activeIndex++;
    updated();
});
function updated() {
    circles.forEach((item,index) => {
        if (index < activeIndex) {
            item.classList.add("active");
        }else {
            item.classList.remove("active");
        }
    });
    line.style.width =  (activeIndex -1)/(circles.length - 1) * 100 + "%";
    if (activeIndex == 1) {
        prev.disabled = true;
    }else if (activeIndex == 4) {
        next.disabled = true;
    }else {
        prev.disabled = false;
        next.disabled = false;
    }
}